<script setup lang="ts">
import { useObserver } from "@/hooks/index";
import store from "@/store";
import { RouterLink } from "vue-router";
import HomePanel from "./home-panel.vue";
import useHomeStore from "@/store/modules/home"

// 调用封装的请求按需加载函数，返回用于绑定DOM的目标元素ref
const { target } = useObserver(useHomeStore().getHomeNewGoodList);
</script>

<template>
  <div class="home-new">
    <!-- 🚨 ref 需在模板中绑定目标元素 -->
    <HomePanel ref="target" title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
      <template #right><XtxMore path="/" /></template>
      <!-- 面板内容 -->
      <ul class="goods-list" v-if="useHomeStore().newGoodsList.length > 0">
        <li v-for="item in useHomeStore().newGoodsList" :key="item.id">
          <RouterLink :to="`/goods/${item.id}`">
            <img :src="item.url" alt="" />
            <p class="name ellipsis">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
      <ul class="goods-list" v-else>
        <li v-for="item in useHomeStore().newGoodsList" :key="item.id">
          <XtxSkeleton :width="306" :height="406" bg="rgba(0,0,0,0.2)" />
        </li>
      </ul>
    </HomePanel>
  </div>
</template>

<style scoped lang="scss">
.goods-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    list-style: none;
    width: 220px;
    height: 320px;
    background: #f0f9f4;
    margin: 12px;
    img {
      width: 220px;
      height: 220px;
    }
    p {
      margin: 15px;
      font-size: 18px;
      padding: 0 30px 0 30px;
      text-align: center;
    }
    .price {
      color: #cf4444;
    }
  }
}
</style>
